import About from "@/pages/About.vue";
import Detail from "@/pages/Detail.vue";
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  /**
   * `history`模式
        优点：`URL`更加美观，不带有`#`，更接近传统的网站`URL`。
        缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有`404`错误。
    `hash`模式
        优点：兼容性更好，因为不需要服务器端处理路径。
        缺点：`URL`带有`#`不太美观，且在`SEO`优化方面相对较差。
   */
  history: createWebHistory(),
  routes: [
    {
      name: "zhuye",
      path: "/home",
      component: Home,
    },
    {
      name: "xinwen",
      path: "/news",
      component: News,
      children: [
        {
          name: "xiang",
          path: "detail",
          component: Detail,
        },
      ],
    },
    {
      name: "guanyu",
      path: "/about",
      component: About,
    },
  ],
});

export default router;
